<template>
	<div style="width: 100vw;height: 100vh;background: linear-gradient(to top ,#ffffff 60%, #2b85e4);">
		<div
			style="height: 100rpx;width: 100%;display: flex;justify-content: center;align-items: center;padding: 15px;">
			<div style="font-size: 44px;">{{ enduranceMileage }}</div>
			<div style="display: flex;flex-direction: column;justify-content: end;">
				<span style="font-size:12px;">可续航</span>
				<span style="font-size:12px;">km</span>
			</div>
		</div>
		<div>
			<div style="width: 50%;margin: auto;display: flex;justify-content: center;align-items: center;">
				<van-progress style="width: 60%;" color="#07C160" :show-pivot="false" :percentage="remainingPower"
					stroke-width="8" />
				<span style="font-size: 16px;padding: 10px;">{{ remainingPower }}%</span>
			</div>
		</div>
		<div>
			<span style="font-size: 12px;">更新时间：</span>
			<span style="font-size: 12px;">{{ updateTime }}</span>
		</div>
		<!-- <CarView></CarView> -->
		<div style="width: 90%;height: auto;display: flex;margin: auto;justify-content: space-between;">
			<div style="width: 40%;border-radius: 16px;height: 160px;border: 1px #ccc solid;padding: 10px;">
				<div style="display: flex;justify-content: space-between;align-content: center;">
					<span style="font-size: 20px;">空调</span>
					<img src="@/assets/closeIcon.png" alt="" style="width: 25px;height: 25px;" />
				</div>
				<div style="margin-top: 50px;">
					<div
						style="background-color: #f2f3f5;display: flex;align-items: center;justify-content: center;border-radius: 36px;">
						<van-icon @click="butminus" name="minus" size="14"></van-icon>
						<span style="font-size: 25px;padding: 12px;">{{ temperature }}</span>
						<van-icon @click="butplus" name="plus" size="14"></van-icon>
					</div>
				</div>
			</div>
			<div style="width: 40%;border-radius: 16px;height: 100px;border: 1px #ccc solid;padding: 10px;">
				<div style="display: flex;justify-content: space-between;align-content: center;">
					<span style="font-size: 20px;">位置</span>
					<img src="@/assets/closeIcon.png" alt="" style="width: 25px;height: 25px;" />
				</div>
			</div>
		</div>
		<div
			style="width: 40%;border-radius: 16px;height: 60px;border: 1px #ccc solid;display: flex;align-items: center;justify-content: space-around;margin: 20px;">
			<div @click="yckz" style="display: flex;align-items: center;">
				<img src="@/assets/location.png" alt="" style="width: 45px;height: 45px;" />
				<span style="font-size: 20px;">远程控制</span>
			</div>
		</div>
		<van-tabbar style="width: 100vw;position: fixed;height: 7%;bottom: 7%;left: 0;display: flex;" v-model="active" route>
			<van-tabbar-item to="/community">
				<span>社区</span>
				<template slot="icon">
					<img src="@/assets/tabbar/community.png" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item to="/analysis">
				<span>数据分析</span>
				<template slot="icon">
					<img src="@/assets/tabbar/analysis.png" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item to="/home">
				<template slot="icon">
					<img src="@/assets/tabbar/home_act.png" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item to="/service">
				<span>服务</span>
				<template slot="icon">
					<img src="@/assets/tabbar/service.png" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item to="/mine">
				<span>我的</span>
				<template slot="icon">
					<img src="@/assets/tabbar/mine.png" />
				</template>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
import { carInfo } from '@/api/user';
// import CarView from '../components/Carview.vue';
export default {
	name: 'home',
	components: {
		// CarView
	},
	data() {
		return {
			active: '/home',
			carId: window.localStorage.getItem('carId'),
			remainingPower: 0,
			temperature: null,
			updateTime: null,
			enduranceMileage: 0


		}
	},
	methods: {
		butplus() {
			if (this.temperature < 30) {
				this.temperature++;
			}
		},
		butminus() {
			if (this.temperature > 0) {
				this.temperature--;
			}
		},
		yckz() {
			this.$router.push({
				path: '/yckz'
			})
		}
	},
	created() {
		carInfo(this.carId).then(res => {
			console.log(res.data)
			if (res.code) {
				this.remainingPower = res.data.remainingPower
				this.updateTime = res.data.updateTime
				this.temperature = res.data.temperature
				this.enduranceMileage = res.data.enduranceMileage
			}
		})
	}
};
</script>

<style>
</style>